<template>
  <div class="content_width patient_con">
    <UserInfo></UserInfo>
    <div class="pat_num">
      <Icon type="ios-notifications-outline" style="font-size:24px" />患者总数 6 ， 本月新增 5
    </div>
    <Row class="btn_con">
      <Col span="12">
        <Button @click="lookover(0)">添加患者</Button>
        <Button type="primary">一键导出</Button>
      </Col>
      <Col span="12" class="right_search">
        <Input v-model="value" placeholder="请输入" style="width: 200px" />
        <Button type="primary">查询</Button>
      </Col>
    </Row>
    <Table border :columns="columns12" :data="data6">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <a href="javascript:;" @click="lookover(index)">查看</a>
        <a href="javascript:;" @click="remove(index)" class="del_btn">删除</a>
      </template>
    </Table>
  </div>
</template>
<script>
import UserInfo from "@/components/userInfo";

export default {
  components: {
    UserInfo,
  },
  data() {
    return {
      value: "",
      columns12: [
        {
          title: "PID",
          key: "PID",
          width:"185",
          align: "center",
          className: "test-name",
        },
        {
          title: "筛选号",
          key: "screen",
          width:"185",
          align: "center",
          className: "test-name",
        },
        {
          title: "入组日期",
          key: "group",
          width:"150",
          align: "center",
          className: "test-name",
        },
        {
          title: "更新时间",
          key: "updata",
          width:"210",
          align: "center",
          className: "test-name",
        },
        {
          title: "创建时间",
          key: "found",
          width:"210",
          align: "center",
          className: "test-name",
        },
        {
          title: "样本库",
          key: "sample",
          align: "center",
          className: "test-name",
        },
        {
          title: "操作",
          slot: "action",
          key: "operation",
          align: "center",
          width:"150",
          className: "test-name",
        },
      ],
      data6: [
        {
          PID: "2020072101ZZHH",
          screen: "AC20200716LTA",
          group: "2020-07-21",
          updata: "2020-07-21 14:24:09",
          found: "2020-07-21 14:20:19",
          sample: "--",
        },
        {
          PID: "2020080501LXM",
          screen: "AC20200813MBP",
          group: "2020-08-05",
          updata: "2020-08-05 16:14:19",
          found: "2020-08-05 16:10:29",
          sample: "--",
        },
        {
          PID: "2020080701FZM",
          screen: "AC20200821ARL",
          group: "2020-08-07",
          updata: "2020-08-07 18:24:33",
          found: "2020-08-07 18:13:27",
          sample: "--",
        },
        {
          PID: "2020081101SDY",
          screen: "AC20200844TSS",
          group: "2020-08-11",
          updata: "2020-08-11 15:41:12",
          found: "2020-08-11 15:27:34",
          sample: "--",
        },
        {
          PID: "2020081401QSH",
          screen: "AC20200871ABJ",
          group: "2020-08-14",
          updata: "2020-08-14 16:14:19",
          found: "2020-08-14 14:24:09",
          sample: "--",
        },
        {
          PID: "2020081701XFH",
          screen: "AC20200892CZS",
          group: "2020-08-17",
          updata: "2020-08-17 17:26:39",
          found: "2020-08-17 15:04:28",
          sample: "--",
        },
      ],
    };
  },
  methods: {
    lookover(index) {
      if (index == 0) {
        this.$router.push(`/BasicInfor/1`);
      }
    },
    remove(index) {
      this.data6.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scope>
.patient_con {
  .pat_num {
    background: #dce8f6;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .del_btn {
    color: #ed4014;
    margin-left: 15px;
  }
  .btn_con {
    margin-bottom: 20px;
    .right_search {
      text-align: right;
      button {
        margin-right: 0;
        margin-left: 20px;
      }
    }
    button {
      margin-right: 20px;
    }
  }
  th.test-name {
    background: #dce8f6;
    border-right: 1px solid #fff;
  }
}
</style>
